<template>
  <div class="wrap">
    <div class="img-error clearfix">
      <img src="assets/img/erorr-404.jpg">
      <div class="msg">
        <p>提示：您可能输错了网址，或者网页已删除或不存在，系统将在<span style="color:red;">{{count}}</span>秒后返回上一页</p>
        <div class="btn">
          <el-button type="info" style="margin-right:50px;" @click="toIndex()" size="medium">
            返回首页
          </el-button>
          <el-button type="primary" plain style="margin-left:50px;" @click="handClick()" size="medium">返回上一页</el-button>
        </div>
      </div>

    </div>
  </div>

</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        count: 5,
        timer: false,
        setTime:null,
      }
    },
    methods: {
      toIndex(){
        clearInterval(this.setTime)
        this.$router.replace({path:'/'})
      },
      handClick() {
        clearInterval(this.setTime)
        this.back()
      },
      back() {
        if (window.history.length <= 1) {
          this.toIndex()
          return false
        } else {
          this.$router.go(-1)
        }
      }
    },
    mounted() {
      this.setTime = setInterval(() => {
        this.count--
        if (this.count == 0) {
          clearInterval(this.setTime)
          this.back()
        }
      }, 1000)
    }
  }
</script>
<style scoped>
  .wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .img-error {
    width: 720px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -280px -360px;
  }

  .img-wrap {
    height: 400px;
    display: inline-block;
    vertical-align: middle;
  }

  .msg p {
    text-align: center;
    color: #a6a6a6;
    font-size: 14px;
  }

  .msg .btn {
    text-align: center;
    margin-top: 40px;
  }
</style>
